<template>
  <div
    id="userLayout"
    class="relative flex"
  >
    <!-- <img
      class="logo-img"
      src="../../assets/images/logo.png"
    > -->
    <span class="logintitle">迭优管理后台</span>
    <div
      class="flex-1 flex items-center justify-around"
    >
      <div class="login-content-bgc">
        <img
          style="width:580px"
          src="../../assets/img/img_banner.png"
          alt=""
        >
      </div>
      <div class="login-content">
        <div class="text-center text-4xl mb-5">
          登录
        </div>
        <el-form
          ref="loginForm"
          :model="loginFormData"
          :rules="rules"
          :validate-on-rule-change="false"
          @keyup.enter="submitForm"
        >
          <el-form-item
            prop="username"
            class="mb-6"
          >
            <el-input
              v-model="loginFormData.UserName"
              size="large"
              placeholder="请输入账号"
              suffix-icon="user"
            />
          </el-form-item>
          <el-form-item
            prop="password"
            class="mb-6"
          >
            <el-input
              v-model="loginFormData.Password"
              show-password
              size="large"
              type="password"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item class="mb-6">
            <el-button
              class="shadow shadow-blue-600 h-11 w-full"
              type="primary"
              size="large"
              @click="submitForm"
            >登 录</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>

  <!-- <div
    id="userLayout"
    class="w-full h-full relative"
  >
    <div
      class="rounded-lg flex items-center justify-evenly w-full h-full bg-white md:w-screen md:h-screen md:bg-[#194bfb]"
    >
      <div class="md:w-3/5 w-10/12 h-full flex items-center justify-evenly">
        <div class="oblique h-[130%] w-3/5 bg-white transform -rotate-12 absolute -ml-52" />
        <div class="z-[999] pt-12 pb-10 md:w-96 w-full  rounded-lg flex flex-col justify-between box-border">
          <div>
            <div class="flex items-center justify-center">

              <img
                class="w-24"
                :src="$GIN_VUE_ADMIN.appLogo"
                alt
              >
            </div>
            <div class="mb-9">
              <p class="text-center text-4xl font-bold">{{ $GIN_VUE_ADMIN.appName }}</p>
            </div>
            <el-form
              ref="loginForm"
              :model="loginFormData"
              :rules="rules"
              :validate-on-rule-change="false"
              @keyup.enter="submitForm"
            >
              <el-form-item
                prop="username"
                class="mb-6"
              >
                <el-input
                  v-model="loginFormData.UserName"
                  size="large"
                  placeholder="请输入账号"
                  suffix-icon="user"
                />
              </el-form-item>
              <el-form-item
                prop="password"
                class="mb-6"
              >
                <el-input
                  v-model="loginFormData.Password"
                  show-password
                  size="large"
                  type="password"
                  placeholder="请输入密码"
                />
              </el-form-item>
              <el-form-item
                prop="captcha"
                class="mb-6"
              >
                <div class="flex w-full justify-between">
                  <el-input
                    v-model="loginFormData.CaptchaCode"
                    placeholder="请输入验证码"
                    size="large"
                    class="flex-1 mr-5"
                  />
                  <div class="w-1/3 h-11 bg-[#c3d4f2] rounded">
                    <img
                      v-if="picPath"
                      class="w-full h-full"
                      :src="picPath"
                      alt="请输入验证码"
                      @click="loginVerify()"
                    >
                  </div>
                </div>
              </el-form-item>
              <el-form-item class="mb-6">
                <el-button
                  class="shadow shadow-blue-600 h-11 w-full"
                  type="primary"
                  size="large"
                  @click="submitForm"
                >登 录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="hidden md:block w-1/2 h-full float-right bg-[#194bfb]"><img
        class="h-full"
        src="https://saas.jitangcn.com/images/img_banner.png"
        alt="banner"
      ></div>
    </div>

  </div> -->

</template>

<script setup>
import { captcha } from '@/api/system'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'

defineOptions({
  name: 'Login',
})

// 验证函数
const checkUsername = (rule, value, callback) => {
  if (value.length < 5) {
    return callback(new Error('请输入正确的用户名'))
  } else {
    callback()
  }
}
const checkPassword = (rule, value, callback) => {
  if (value.length < 6) {
    return callback(new Error('请输入正确的密码'))
  } else {
    callback()
  }
}


// 登录相关操作
const loginForm = ref(null)
const picPath = ref('')
const loginFormData = reactive({
  UserName: '',
  Password: '',
})
const rules = reactive({
  UserName: [{ validator: checkUsername, trigger: 'blur' }],
  Password: [{ validator: checkPassword, trigger: 'blur' }],
})

const userStore = useUserStore()
const login = async() => {
  return await userStore.LoginIn(loginFormData)
}

const submitForm = () => {
  loginForm.value.validate(async(v) => {
    if (v) {
      const flag = await login()

    } else {
      ElMessage({
        type: 'error',
        message: '请正确填写登录信息',
        showClose: true,
      })
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
// .img_bg {
//   background: url('../../assets/img_bg.png');
// }

.logo-img {
  position: absolute;
  width: 400px;
  margin: 30px 0 0 30px;
}

#userLayout {
  // max-width: 1200px;
  width: 100vw;
  height: 100vh;
  background: url('../../assets/img_bg.png');
  margin: 0 auto;
}

.login-content {
  padding: 40px;
  background-color: #fff;
}
.logintitle {
    position: absolute;
    width: 400px;
    margin: 30px 0 0 30px;
    color: white;
    font-size: 32px;
}
</style>
